<template>
    <div class="advantoageBoxClass">
        <Menus :webconfig="advantoage.webinfo" :data="advantoage.menusnav"></Menus>
        <div class="advantoageCoreBoxClass flex justify-center align-center flex-direction">
            <div class="topBox flex justify-center align-end rls">
                <img src="https://api.dsnbc.com/images/20230828/da73ca1c6fcb0c5f6390143923fbe3df.png">
                <div class="yinghuoBox abs flex justify-start align-center">
                    <div class="outer-circle">
                        <div class="inner-circle flex justify-center align-center">
                            <img :src="advantoage.webinfo.web_logo" alt="">
                        </div>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="advantoageTopBox flex justify-between align-center">
                <div class="coverBoxClass rls">
                    <div class="coverTextBox flex justify-center align-center fill">
                        <h1 class="safewincontentclass">为天地立心，为生民立命，为往圣继绝学，为万世开太平。</h1>
                        <span>读书人通晓万物造化之理，使天道彰显。从物质上丰衣足食，精神上伦理政教，使百姓安身立命。替历代圣贤延续行将绝传的不朽学说，给千秋万代开创永久太平的伟大基业。</span>
                    </div>
                </div>
            </div>
        </div>
        <Copy :webconfig="advantoage.webinfo" :frendlyData="advantoage.friends" :menuDatas="advantoage.menus" :bussinessData="advantoage.bussiness" :questionsData="advantoage.questions.data"></Copy>
    </div>
</template>

<script>
import {extendsMenus,extendsParams,extendsEncrypte} from '~/assets/inc/common.js';
import {apis} from '~/assets/inc/apis.js';
export default {
    data(){
        return{
            advantoage:""
        }
    },
    async asyncData(context){
        extendsEncrypte({},context.$axios);
        let {data} = await context.$axios.get(apis.advantoageAPI,extendsParams({}));
        data.message.menusnav = extendsMenus([...data.message.menus]);
        return {advantoage:data.message};
    },
    head: {
        title: '欽天監 - 强势文化传播中心，“文化自信、民族复兴”',
    },
    watch:{
        //监听store的变化
        '$store.state.locale': function (el,val) {
            //你需要执行的代码
            this.getDataHandle(el);
        }
    },
    mounted(){
        this.advantoage.webinfo.web_logo = this.advantoage.webinfo.web_logo.replaceAll('\\','/');
        this.$store.commit('setLoading',false);
    },
    methods:{
        async getDataHandle(){
            this.$store.commit('setLoading',true);
            extendsEncrypte({},this.$axios);
            let {data} = await this.$axiosaxios.get(apis.advantoageAPI,extendsParams({}));
            data.message.menusnav = extendsMenus([...data.message.menus]);
            this.advantoage = data.message;
            this.$store.commit('setLoading',false);
        }
    },
    beforeDestroy(){
        this.$store.commit('setLoading',true);
    }
}
</script>

<style lang="scss" scoped>
    .advantoageCoreBoxClass{
        width:100%;
        padding:150px 0 50px 0;
        .topBox{
            width:1200px;
            .yinghuoBox{
                flex:0 0 auto;
                padding:50px 0;
                top:230px;
                .outer-circle {
                    position: relative;
                    height: 300px;
                    width: 300px;
                    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
                    border-radius: 50%;
                    animation: rotate 1.5s linear infinite;
                }

                .outer-circle span {
                    position: absolute;
                    height: 300px;
                    width: 300px;
                    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
                    border-radius: 50%;
                }

                span:nth-child(1) {
                    filter: blur(5px);
                }

                span:nth-child(2) {
                    filter: blur(10px);
                }

                span:nth-child(3) {
                    filter: blur(25px);
                }

                span:nth-child(4) {
                    filter: blur(150px);
                }

                .inner-circle {
                    height: 280px;
                    width: 280px;
                    position: absolute;
                    background: rgba(0, 0, 0, 0.9);
                    backdrop-filter: blur(10px);
                    top: 10px;
                    left: 10px;
                    border-radius: 50%;
                    z-index: 9;
                    padding:20px;
                    font-size: 48px;
                    font-weight: bold;
                    color:var(--green);
                }

                @keyframes rotate {
                    0% {
                        filter: hue-rotate(0deg);
                    }
                    100% {
                        filter: hue-rotate(360deg);
                    }
                }
            }
        }
        .advantoageTopBox{
            width:1200px;
            .coverBoxClass{
                flex:1 1 auto;
                padding:0 0 0 50px;
                .coverTextBox{
                    padding:20px;
                    border-radius: 20px;
                    flex-flow: column;
                    color:var(--black);
                    h1{
                        font-size: 32px;
                    }
                    span{
                        font-size: 14px;
                        padding-top: 30px;
                        color:var(--gray);
                    }
                }
            }
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .advantoageCoreBoxClass{
            width:100vw;
            padding:5rem 0 0 0;
            .topBox{
                width:100%;
                .yinghuoBox{
                    width:100%;
                    padding:5rem 0;
                    justify-content: center;
                    top:10rem;
                    .outer-circle {
                        position: relative;
                        height: 15rem;
                        width: 15rem;
                        background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
                        border-radius: 50%;
                        animation: rotate 1.5s linear infinite;
                    }

                    .outer-circle span {
                        position: absolute;
                        height: 15rem;
                        width: 15rem;
                        background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
                        border-radius: 50%;
                    }

                    span:nth-child(1) {
                        filter: blur(0.5rem);
                    }

                    span:nth-child(2) {
                        filter: blur(1rem);
                    }

                    span:nth-child(3) {
                        filter: blur(2.5rem);
                    }

                    span:nth-child(4) {
                        filter: blur(15rem);
                    }

                    .inner-circle {
                        height: 13rem;
                        width: 13rem;
                        position: absolute;
                        background: rgba(0, 0, 0, 0.8);
                        backdrop-filter: blur(1rem);
                        top: 1rem;
                        left: 1rem;
                        padding:2rem;
                        font-size: 4.8rem;
                    }

                    @keyframes rotate {
                        0% {
                            filter: hue-rotate(0deg);
                        }
                        100% {
                            filter: hue-rotate(360deg);
                        }
                    }
                }
            }
            .advantoageTopBox{
                width:100%;
                flex-wrap: wrap;
                .coverBoxClass{
                    width:100%;
                    border-radius: 0;
                    padding:0;
                    .coverTextBox{
                        padding:2rem 3rem;
                        background: linear-gradient(180deg, #ffffff 0%, transparent 20%);
                        border-radius: 0;
                        flex-flow: column;
                        h1{
                            font-size: 2.2rem;
                        }
                        span{
                            font-size: 1.4rem;
                            padding-top: 3rem;
                        }
                    }
                }
            }
        }
    }
</style>
